<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <!-- 修正拼写错误 -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        h1 {
            color: #333;
        }

        .form-box {
            width: 80%;
            margin: 0 auto;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .cs-flex{
            display: flex;
        }
        .cs-flex-1{
            flex: 1;
        }
        .text-right{
            text-align: right;

        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        input[type="text"],
        input[type="password"],
        select {
            padding: 0;
            margin: 0;
            width: 100%;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: block;
            height: 32px;
            line-height: 32px;
        }

        select:focus {
            border-color: #28a745;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background-color: #218838;
        }

        .refresh-icon {
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="form-box">
        <h1><svg class="refresh-icon"   width="24" height="24" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="r5" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45)" style="transform-origin:center center"><stop stop-color="#FC466B"/><stop offset="1" stop-color="#3F5EFB"/></linearGradient><radialGradient id="r6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(256) rotate(90) scale(512)"><stop stop-color="white"/><stop offset="1" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect id="r4" width="256" height="256" x="0" y="0" rx="64" fill="url(#r5)" stroke="#FFFFFF" stroke-width="0" stroke-opacity="100%" paint-order="stroke"/><svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white" alignment-baseline="middle" x="64" y="64"><path d="M5 13a10 10 0 0 1 14 0"/><path d="M8.5 16.5a5 5 0 0 1 7 0"/><path d="M2 8.82a15 15 0 0 1 20 0"/><line x1="12" x2="12.01" y1="20" y2="20"/></svg></svg> WiFi 配置页面</h1>
        <form method="POST" action="/config">
            <!-- <div class="cs-flex">
                <div class="cs-flex-1">
                    <label>WiFi 列表:</label>
                </div>
                <div class="cs-flex-1 text-right">
                    <svg class="refresh-icon" style="height: 1rem;" onclick="wifi_scan()"  viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="r5" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45)" style="transform-origin:center center"><stop stop-color="#fc476b00"/><stop offset="1" stop-color="#3F5EFB"/></linearGradient><radialGradient id="r6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(256) rotate(90) scale(512)"><stop stop-color="white"/><stop offset="1" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect id="r4" width="256" height="256" x="0" y="0" rx="64" fill="#fc476b00" stroke="#FFFFFF" stroke-width="0" stroke-opacity="100%" paint-order="stroke"/><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white" alignment-baseline="middle" x="28" y="28"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg></svg>
                </div>
            </div> -->
            <label>WiFi 列表:</label>
            <div class="cs-flex">
                <select id="aplist" onchange="select_changed()"
                style="margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px;">
                <!-- 修正了vaule拼写错误 -->
                <option value="">luatos1234</option> <!-- 修正了vaule拼写错误 -->
            </select>
            </div>
            <br>
            <label>WiFi SSID:</label>
            <div class="cs-flex">
                <input type="text" name="ssid" id="ssid">
            </div>
            <br>
            <label>WiFi Password:</label>
            <div class="cs-flex">
                <input type="password" name="password">
            </div>
            <br>
            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script>
    function wifi_get_aplist() {
        var resp = fetch("/scan/list").then(function (resp) {
            console.log(resp, resp.status)
            if (resp.status != 200) {
                return
            }
            resp.json().then(function (data) {
                console.log("data", data)
                var tmp = ""
                for (let index = 0; index < data.data.length; index++) {
                    const apname = data.data[index];
                    if (index == 0) {
                        tmp += "<option value='" + index + "' selected>" + apname + "</option>\n" // 修正了vaule拼写错误
                    }
                    else {
                        tmp += "<option value='" + index + "'>" + apname + "</option>\n" // 修正了vaule拼写错误
                    }

                }
                document.getElementById("aplist").innerHTML = tmp
            })
        })
    }
    function wifi_scan() {
        fetch("/scan/go")
        setTimeout(wifi_get_aplist, 3000)
    }

    function select_changed(event) {
        var apselect = document.getElementById("aplist")
        var ssid = document.getElementById("ssid")
        ssid.value = apselect.options[apselect.selectedIndex].text
    }
    setTimeout(wifi_get_aplist, 3000)
</script>

</html>
